import React,{Component} from 'react';

import { px2dp, px2sp } from '../../utils/DisplayUtils';
import {StyleSheet, Text, View, TouchableHighlight,ScrollView, Modal } from 'react-native';

export default class UpdateVersionView extends Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
        isShow: false,       
        isForceUpdate: false,  //是否强制更新
        title:'',     //标题
        content:''//内容

    }

  }

  componentDidMount(){

  }

  skipClick(){

    this.props.skipClick()

  }

  updateClick(){

    this.props.updateClick()

  }


  render() {

    const that = this;
   
    return (
    

            <Modal 
            animationType='slide'
            transparent={true}
            onRequestClose={()=>{

            }}>
              <View  style={styles.container}>
                <View  style={styles.containerCenter}>

                    <View style={styles.titleBg}>
                        <Text style={styles.titleText}>{this.props.title}</Text>
                    </View>

                    <ScrollView style={styles.scrollViewBg}>
                        <View style={styles.contentBg}>

                            <Text style={styles.contentText} >{this.props.content}</Text>
                        </View>

                      
                    </ScrollView>


                    <View style={styles.actionSplitBg}></View>
                    <View style={styles.actionBg}>
                        <TouchableHighlight
                            activeOpacity={0.6}
                            underlayColor="#DDDDDD"
                            onPress={() => that.skipClick()}
                            style={styles.skipButtonBg}>
                            <Text>跳过</Text>
                        </TouchableHighlight>

                       
                        {
                        this.props.isForce ? null : 
                        <View style={styles.actionBtnSplitBg}></View>
                    }

                    {
                        this.props.isForce ? null : 
                        <TouchableHighlight
                            activeOpacity={0.6}
                            underlayColor="#DDDDDD"
                            onPress={() => that.updateClick()}
                            style={styles.updateButtonBg}>
                            <Text>更新</Text>
                        </TouchableHighlight>
                    }
                        
                    </View>

                </View>
              </View>



            </Modal>
       

    );
  }
}


/** 样式表*/
const styles = StyleSheet.create({


  container: {
  
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    flex:1,
    borderColor:"#efefef",
    backgroundColor:'rgba(0,0,0,0.5)'
  },
  containerCenter: {
  
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    width: px2dp(335),
    height: px2dp(285),
    borderRadius:8,
    borderColor:"#efefef",
    backgroundColor:"#ffffff",
    borderWidth: 1
  },
  titleBg:{
    flexDirection: 'row',
    height:px2dp(50),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'rgba(0,0,0,0)',

  },
  titleText:{
    backgroundColor:'rgba(0,0,0,0)',
    color:"#333333",
    fontSize: px2dp(22)
  },

  scrollViewBg:{

    backgroundColor:'rgba(0,0,0,0)'

  },
  contentBg:{
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: px2dp(10),
    marginRight: px2dp(10),
    backgroundColor:'rgba(0,0,0,0)'
  },
  contentText:{
    color:"#999999",
    fontSize: px2dp(14)
  },

  actionSplitBg:{

    backgroundColor:'#dedede',
    height: px2dp(1),
    width: '100%'

  },
  
  actionBg:{
    flexDirection: 'row',
    height: px2dp(40),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'rgba(0,0,0,0)'
  },

  skipButtonBg:{
    flex: 1,
    height: px2dp(40),
    justifyContent: 'center',
    alignItems: 'center',
    
  },
  actionBtnSplitBg:{
    backgroundColor:'#dedede',
    width: px2dp(1),
    height: '100%'
  },
  
  updateButtonBg:{
    flex: 1,
    height: px2dp(40),
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: px2dp(1),
    
  }
});
